<template>
    <div class="trade">
        <div class="head">活动实时交易情况</div>
        <div class="list">
            <div>
                <span>今日交易总额</span>
                <p>124,543,233 <span>元</span></p>
            </div>
            <div>
                <span>销售目标完成率</span>
                <p>92%</p>
            </div>
            <div>
                <span>活动剩余时间</span>
                <p>01:10:12</p>
            </div>
            <div>
                <span>每秒交易总额</span>
                <p>234 <span>元</span></p>
            </div>
        </div>
        <div class="trade-picture"></div>
    </div>
</template>

<script>
    export default {
        name: "trade",
        data() {
            return {}
        },
        created() {
        },

        methods: {},

        mounted() {

        }

    }
</script>

<style scoped>
    .trade{
        width: 1110px;
        height: 650px;
        background: #ffffff;
    }
    .trade .head{
        height: 40px;
        border-bottom: 1px solid #d3d3d3;
        text-align: left;
        padding: 25px 0 0 25px;
    }

    .trade .list {
        display: flex;
        justify-content: space-between;
        padding: 25px;
    }
    .trade .list div{
        text-align: left;
    }
    .trade .list span {
        font-size: 14px;
        color: #aaa8a8;
    }
    .trade .list p {
        font-size: 24px;
        margin: 10px 0;
    }
    .trade .picture {
        height: 460px;
    }
    .trade .trade-picture {
        height: 466px;
    }
</style>
